<template>
  <view class="viewport">
    <scroll-view class="scroll-view" :refresher-triggered="refreshing" scroll-y="true" lower-threshold="20" @scrolltolower="onScrollToLower" @refresherrefresh="onRefresh">
      <view class="port">

				<view class="ul" v-for="i in 5">
					
					<view class="title">
						<view class="">
							备件001
						</view>
					</view>
					<view class="li">
					  <span class="left">备件编码</span>
					  <span>SB45478444</span>
					</view>
					<view class="li">
					  <span class="left">规格型号</span>
					  <span>30*10*20</span>
					</view>
					<view class="li">
					  <span class="left">备件类型</span>
					  <span>电梯设备备件类型</span>
					</view>
					<view class="li1">
					  <span class="left1">领用数量：3</span>
					  <span  class="right1">|  出库数量：3</span>
					</view>
				</view>
       
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}
.scroll-view {
  height: 100%;
}
.port {
	padding-bottom: 80rpx;
    .ul {
      margin-bottom: 24rpx;
      background-color: #fff;
      padding: 0 30rpx 30rpx 30rpx;
			// margin-bottom: 100rpx;
      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
				display: flex;
				.time{
					color: #ccc;
					position: absolute;
					right: 30rpx;
					font-size: 28rpx;
				}
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #000000;
          margin-right: 30rpx;
        }
      }
			.li1{
				margin-top: 20rpx;
				border-top: 1rpx dashed #bebebe;
				padding-top: 20rpx;
				.left1{
					margin-left: 30rpx;
				}
				.right1{
					margin-left: 90rpx;
				}
			}
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid #0052d9;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          color: #0052d9;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
</style>
